<template>
  <div class="repair-request-container">
    <div class="app-container">
      <el-card class="box-card">

        <div
          slot="header"
          class="clearfix"
        >
          <el-page-header
            @back="goBack"
            content="报修单信息"
          >
          </el-page-header>
        </div>

        <div class="descriptions">
          <div class="repair_request margin-b-20">
            <el-descriptions
              border
              title="报修申请信息"
              :column='2'
              label-class-name="width-100"
              v-if="requestObj.id"
            >
              <el-descriptions-item label="申请人学号">{{requestObj.s_number}}</el-descriptions-item>
              <el-descriptions-item label="申请人姓名">{{requestObj.s_name}}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{requestObj.phone}}</el-descriptions-item>
              <el-descriptions-item label="报修单号">{{requestObj.id}}</el-descriptions-item>
              <el-descriptions-item label="提交时间">{{new Date(requestObj.ctime).toLocaleString()}}</el-descriptions-item>
              <el-descriptions-item label="报修区域">{{areaOptions[requestObj.a_id]?.label}}</el-descriptions-item>
              <el-descriptions-item label="报修类型">{{requestObj.type_name}}</el-descriptions-item>
              <el-descriptions-item label="报修地点">{{requestObj.place}}</el-descriptions-item>
              <el-descriptions-item
                label="问题描述"
                :span='2'
              >{{requestObj.problem}}</el-descriptions-item>
              <el-descriptions-item
                label="故障照片"
                :span='2'
                v-if="requestObj.p_name"
              >
                <span
                  v-for="(item, index) in requestObj.p_name"
                  :key="index"
                >
                  <el-image
                    v-if="item"
                    :src="imgUrl + item"
                    fit='scale-down'
                    style="width: 100px; height: 100px"
                    @click="bigImg = item"
                  >
                  </el-image>
                  <span v-else-if="index === 0">无</span>
                </span>
              </el-descriptions-item>
              <el-descriptions-item
                label="报修进度"
                :span='2'
              >
                <div class="steps">
                  <el-steps
                    v-if="requestObj.state < 7 && requestObj.state !== 2 && requestObj.state !==3 "
                    :space="220"
                    :active="requestObj.state === 1 ? 0 : requestObj.state - 3"
                    finish-status="success"
                    process-status='process'
                    align-center
                  >
                    <el-step
                      :title="repairState['1']"
                      :description="new Date(requestObj.atime).toLocaleString()"
                    ></el-step>
                    <el-step
                      :title="repairState['4']"
                      :description="new Date(requestObj.rtime).toLocaleString()"
                    ></el-step>
                    <el-step :title="repairState['5']"></el-step>
                    <el-step
                      :title="repairState['6']"
                      :description="recordObj.ctime ? new Date(recordObj.ctime).toLocaleString() :''"
                    ></el-step>
                    <el-step title="学生确认维修情况"></el-step>
                  </el-steps>
                  <el-steps
                    v-else-if="requestObj.state > 6"
                    :space="220"
                    :active="requestObj.state-2"
                    finish-status="success"
                    process-status='process'
                    align-center
                  >
                    <el-step
                      :title="repairState['1']"
                      :description="new Date(requestObj.atime).toLocaleString()"
                    ></el-step>
                    <el-step
                      :title="repairState['4']"
                      :description="new Date(requestObj.rtime).toLocaleString()"
                    ></el-step>
                    <el-step :title="repairState['5']"></el-step>
                    <el-step
                      :title="repairState['6']"
                      :description="recordObj.ctime ? new Date(recordObj.ctime).toLocaleString() :''"
                    ></el-step>
                    <template v-if="requestObj.state===8">
                      <el-step title="学生确认维修完成"></el-step>
                      <el-step
                        :title="repairState['8']"
                        :description="new Date(requestObj.etime).toLocaleString()"
                      ></el-step>
                    </template>
                    <template v-else>
                      <el-step
                        :title="repairState['7']"
                        :description="new Date(requestObj.etime).toLocaleString()"
                      ></el-step>
                      <el-step title="待维修人员前往"></el-step>
                    </template>
                  </el-steps>
                  <el-steps
                    v-else-if="requestObj.state === 3"
                    :space="300"
                    :active="1"
                    finish-status="success"
                    process-status='error'
                    align-center
                  >
                    <el-step
                      title="管理员审核"
                      :description="new Date(requestObj.atime).toLocaleString()"
                    ></el-step>
                    <el-step
                      title="被管理员退回"
                      :description="new Date(requestObj.atime).toLocaleString()"
                    ></el-step>
                    <el-step title="修改后重新提交"></el-step>
                  </el-steps>
                  <el-steps
                    v-else-if="requestObj.state === 2"
                    :space="300"
                    :active="1"
                    finish-status="success"
                    process-status='error'
                    align-center
                  >
                    <el-step
                      title="管理员审核通过"
                      :description="new Date(requestObj.atime).toLocaleString()"
                    ></el-step>
                    <el-step
                      title="维修人员退单"
                      :description="new Date(requestObj.rtime).toLocaleString()"
                    ></el-step>
                    <el-step title="待管理员重审"></el-step>
                  </el-steps>
                </div>
              </el-descriptions-item>
              <el-descriptions-item
                v-if="requestObj.state === 2 || requestObj.state === 3 || requestObj.state === 7"
                label="退回原因"
                :span='2'
              >{{requestObj.cause}}</el-descriptions-item>
            </el-descriptions>
          </div>

          <div
            class="repairer margin-b-20"
            v-if="repairerObj.name"
          >
            <el-descriptions
              border
              title="维修人员信息"
              label-class-name="width-100"
            >
              <el-descriptions-item label="姓名">{{repairerObj.name}}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{repairerObj.phone}}</el-descriptions-item>
            </el-descriptions>
          </div>

          <div
            class="maintenance-record"
            v-if="recordObj.id"
          >
            <el-descriptions
              border
              title="维修记录"
              :column='1'
              label-class-name="width-100"
            >
              <el-descriptions-item label="完工照片">
                <span
                  v-for="(item, index) in recordObj.p_name"
                  :key="index"
                >
                  <el-image
                    v-if="item"
                    :src="imgUrl + item"
                    fit='scale-down'
                    style="width: 100px; height: 100px"
                    @click="bigImg = imgUrl + item"
                  >
                  </el-image>
                  <span v-else-if="index === 0">无</span>
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="备注">{{recordObj.remark}}</el-descriptions-item>
              <el-descriptions-item label="完工时间">
                {{ new Date(recordObj.ctime).toLocaleString() }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>

        <el-dialog
          v-if="bigImg"
          :show-close='false'
        >
          <img
            width="100%"
            :src="bigImg"
          >
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { repairState, urlArr, goBack, imgUrl } from '@/utils'
import {
  getRecordInfoAPI,
  getRepairerInfoPartAPI,
  getRepairInfoAPI,
  getUserInfoTypeAPI,
  screenAreaListAPI
} from '@/api'
export default {
  name: 'repairInfo',
  data () {
    return {
      requestObj: {},
      repairerObj: {},
      recordObj: {},
      repairState, // 报修单状态键值对
      activities: [],
      imgUrl,
      bigImg: '',
      id: this.$route.params.id,
      areaOptions: {}
    }
  },
  created () {
    ; (this.id && this.getRequestInfoFn()) || this.goBack()
    this.getAreaFn()
  },
  methods: {
    // 获取报修请求信息 -> 发起请求
    async getRequestInfoFn () {
      try {
        const { success, code, data } = await getRepairInfoAPI(this.id)
        if (success && code === 10000) {
          ; (data.state > 3 ||
            (data.state === 4 && (await getUserInfoTypeAPI()).data.type > 2)) &&
            (await this.getRepairerInfoFn(data.r_number))
          data.state > 5 && (await this.getRecordInfoFn(data.m_id))

          this.requestObj = urlArr(data)
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    // 获取维修区域 -> 发送请求
    async getAreaFn () {
      try {
        const { success, code, data } = await screenAreaListAPI({
          page: 1
        })
        if (success && code === 10000) {
          data.forEach((item) => {
            this.$set(this.areaOptions, item.id, {
              value: item.id,
              label: item.name
            })
          })
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    // 获取维修人员信息 -> 发起请求
    async getRepairerInfoFn (number) {
      try {
        const { success, code, data } = await getRepairerInfoPartAPI(number)
        if (success && code === 10000) {
          this.repairerObj = data
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    // 获取维修记录信息 -> 发起请求
    async getRecordInfoFn (id) {
      console.log(id)
      try {
        const { success, code, data } = await getRecordInfoAPI(id)
        if (success && code === 10000) {
          this.recordObj = urlArr(data)
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    goBack
  }
}
</script>

<style lang="less" scoped>
.steps {
  padding: 10px;
}
</style>
